<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Businessman Page</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!-- <h1>Hello Businessman Page</h1> -->
    <!-- 标签式导航 -->
    <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" id="nav-link-home" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nav-link-warehouse" href="#warehouse">Warehouse</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="nav-link-billing_details" href="#billing_details">Billing Details</a>
        </li>
    </ul>

    <!-- 横坐标 -->
    <div class="container">
        <div class="row">
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">1</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">2</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">3</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">4</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">5</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">6</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">7</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">8</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">9</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">10</div>
            <div class="col-md-1 text-center" style="background-color: antiquewhite;">11</div>
            <div class="col-md-1 text-center" style="background-color: aquamarine;">12</div>
        </div>
    </div>

    <!-- 每个标签页的具体内容 -->
    <div class="container tab-content" id="myTabContent">
        <div class="row tab-pane active" id="home">
            home
            <div class="container p-0 tab-pane-content">
                <div class="col-md-1 p-0 text-center">...</div>
            </div>
        </div>
        <div class="row tab-pane" id="warehouse">
            warehouse
            <div class="row tab-pane-content">
                <div class="col-md-1 p-0 text-center">...</div>
            </div>
        </div>
        <!-- billing_details -->
        <div class="row tab-pane" id="billing_details">
            billing_details
            <!-- billing_details_overview -->
            <div class="container p-0 mt-3 tab-pane-content" id="billing_details_overview">
                <div class="row" id="billing_details_overview_row_general_income">
                    <div class="col-md-6 p-0 text-center">General income:</div>
                    <div class="col-md-6 p-0 text-center" id="general_income">?</div>
                </div>
                <div class="row mt-5" id="billing_details_overview_row_total_expenditure">
                    <div class="col-md-6 p-0 text-center">Total expenditure:</div>
                    <div class="col-md-6 p-0 text-center" id="total_expenditure">?</div>
                </div>
            </div>
        </div>
    </div>

    <script src="./JS/businessman_user_page_event.js"></script>
</body>
</html>